﻿@charset "utf-8";
/* CSS Document */
html,body{
	height:100%;
}
.PC_body{
  background-image: url("../pictures/BG.jpg");
  background-repeat: no-repeat;
  background-size:cover;
}
.Mobile_body{
  background-image: url("../pictures/mobileBG.jpg");
  background-repeat: no-repeat;
  background-size:cover;
}
#topDiv{
	height:50px;
	width: 100%;
	position:fixed;
	border-bottom:2px solid #B7B6B6;
	background-color:#030303;
	padding-top:12px;
	filter: alpha(opacity=60);
	opacity: 0.6;
	text-align: center;
	z-index:999;
}
#topDiv >ul{
	display: inline-block;
	list-style-type: none;
}
#topDiv >ul >li{
	float: left;
	margin-right:80px;
}
#topDiv >ul >li >span{
	cursor:default;
	display: block;
	width: 80px;
	height:30px;
	font-size: 15px;
	line-height: 30px;
	background-color:#FB0A0E;
	filter: alpha(opacity=60);
	opacity: 0.6;
	text-align: center;
}
#topDiv >ul >li >span:hover{
	color:#ffffff;
}
#topDiv >ul >li >span:hover ul{
	display:block;
}
#topDiv >ul >li >span >ul{
	display: none;
	background-color:red;
	list-style-type: none;
}
#topDiv >ul >li >span >ul >li{
	display:inline;
}
#topDiv >ul >li >span >ul >li >span{
	cursor:default;
	color:#ffffff;
	border-top-width:1px;
	border-top-color:#000000;
	border-top-style:solid;
	display:block;
	width:80px;
	text-align:center;
	font-size: 15px;
}
#topDiv >ul >li >span >ul >li >span:hover{
	color:black;	
}
#centerDiv{
	position: absolute;
	height:540px;
	width:540px;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}
.PC_drawCanvas{
	display: float;
	background:#F9F7F7;
	filter: alpha(opacity=60);
	opacity: 0.6;
}
.Mobile_drawCanvas{
	display: float;
	background:#F9F7F7;
	filter: alpha(opacity=60);
	opacity: 0.6;
}
#groupDiv{
	width: 100%;
	height:100px;
	position: fixed;
	bottom: 0px;
	border-top:2px solid #B7B6B6;
	background:#030303;
	filter: alpha(opacity=60);
	opacity: 0.6;
	text-align: center;
}
#music{
}
#reset{
	margin-left: 50px;
	margin-bottom: 7px;
}
.music-on{
	animation: rotating 2s linear infinite;
	-webkit-animation: rotating 2s linear infinite;
}
@keyframes rotating{
	from{
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
	}to{
		transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
	}
}
@-webkit-keyframes rotating{
	from{
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
	}to{
		transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
	}
}
#music:hover,#reset:hover{
	transform: scale(1.5);
}
#music:active,#reset:active{
	cursor:wait;
	transform:translate(1px,2px);
}
